<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>拖拽</title>
        <style type="text/css">
        	#big{
        		width: 800px;
        		height:800px;
        		border: 1px solid black;
        		position: relative;
        	}
        	#small{
        		width:100px;
        		height:100px;
        		background-color: gray;
        		position: absolute;
        	}
        </style>
    </head>
    <body>
    <div id="big">
    	<div id="small"></div>
    </div>								
    </body>
    <script type="text/javascript">
	var big = document.getElementById('big');
		var small = document.getElementById('small');
	;
		small.onmousedown = function(event){
			var x = event.clientX - small.offsetLeft;
			var y = event.clientY - small.offsetTop;
			

			
			
			document.onmousemove = function(event){
				var _x = event.clientX;
				var _y = event.clientY;
				small.style.left = _x - x + "px";
				small.style.top = _y - y +"px";
                	document.onmouseup = function(){
    		        document.onmousemove="";
                   }
               	}
		}
    </script>
</html>